<template>
  <div>
    <el-form ref="remote" v-loading="loading" :model="remote" label-width="140px" label-position="left" size="small" :rules="rules">
      <el-form-item label="选择远程表" required prop="table">
        <el-select v-model="remote.table" placeholder="请选择" style="width: 100%">
          <el-option v-for="item in tableOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <span class="dk-help">请选择要关联的远程表，当前选择项仅显示当下模块的数据表</span>
      </el-form-item>
      <template v-if="remote.table">
        <el-form-item label="下拉value字段" required prop="value">
          <el-select v-model="remote.value" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in fieldOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="下拉label字段" required prop="label">
          <el-select v-model="remote.label" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in fieldOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="控制器文件">
          <el-input :value="otherData.controllerFile" disabled>
            <template slot="append">
              <el-button v-if="otherData.have_controller" style="color: #67c23a">文件存在</el-button>
              <el-button v-else style="color: #f56c6c">文件不存在</el-button>
            </template>
          </el-input>
          <span class="dk-help">根据选择的表自动选择控制器文件</span>
        </el-form-item>
        <el-form-item label="关联控制器方法">
          <el-input v-model="remote.action" />
          <span class="dk-help">自定义控制器方法，不填写则<b>默认为select</b></span>
        </el-form-item>
        <el-form-item label="模型文件">
          <el-input :value="otherData.modelFile" disabled>
            <template slot="append">
              <el-button v-if="otherData.have_model" style="color: #67c23a">文件存在</el-button>
              <el-button v-else type="danger" style="color: #f56c6c">文件不存在</el-button>
            </template>
          </el-input>
          <span class="dk-help">根据选择的表自动选择模型文件</span>
        </el-form-item>
        <el-form-item label="关联模型方法别名">
          <el-input v-model="remote.modelAction" />
          <div class="dk-help">设置关联模型的别名，否则默认为当前选择的表名（去除前缀和应用前缀）</div>
          <div class="dk-help">例如当前表有user_id（用户ID）、top_user_id（上级用户ID）都指向同一个表</div>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" @click="submitForm('remote')">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getRemoteFieldOption, getRemoteTableOption } from '@/api/crud'

export default {
  name: 'RemoteForm',
  props: {
    value: {
      default: () => {
        return {}
      },
      type: Object
    },
    addon: {
      default: () => {
        return {}
      },
      type: Object
    },
    fieldItem: {
      default: () => {
        return {}
      },
      type: Object
    }
  },
  data() {
    return {
      loading: true,
      remote: {
        table: '',
        value: '',
        label: '',
        action: 'select'
      },
      fieldOption: [],
      tableOption: [],
      controllerOption: [],
      otherData: {},
      rules: {
        table: [{ required: true, message: '请选择远程表', trigger: 'change' }],
        value: [{ required: true, message: '请选择下拉value字段', trigger: 'change' }],
        label: [{ required: true, message: '请选择下拉label字段', trigger: 'change' }],
        action: [{ required: true, message: '请选择下拉label字段', trigger: 'blur' }]
      }
    }
  },
  watch: {
    'remote.table'() {
      if (this.remote.table) {
        getRemoteFieldOption(this.remote.table, this.addon.name).then((res) => {
          this.fieldOption = res.data
          this.otherData = res.other
        })
      }
    },
    value() {
      this.remote = this.value
    },
    remote() {
      this.$emit('input', this.remote)
    }
  },
  mounted() {
    this.remote = this.value
    this.getRemoteTableOption()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.remote)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getRemoteTableOption() {
      console.log(this.addon.name)
      getRemoteTableOption(this.addon.name).then((res) => {
        console.log(res)
        this.tableOption = res.data
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
